import React from 'react'
import styles from './index.module.less'
import RainbowChart from '@/components/RainbowChart'

export default function Rainbow({ dataSource }: any) {
    const { userBarrier } = dataSource
    const { detail } = userBarrier
    const width = window.innerWidth
    return (
        <div className={styles.container}>
            {detail?.length && (
                <div>
                    <div className={styles.rainbow_container} style={{ height: `${window.innerWidth * 0.55}px` }}>
                        <RainbowChart data={detail} noAnimation width={width} bgColor={'#f5f9ff'} />
                    </div>
                    <div className={styles.block_wrapper}>
                        {detail?.map((item: any, index: number) => {
                            return (
                                <div className={styles.block_title} key={item.id}>
                                    <span>
                                        角色{index + 1}：{item?.name}
                                    </span>
                                    <span>
                                        时间广度：
                                        <span className={styles.age_width}>
                                            {item?.age_start}岁~
                                            {item?.age_end}岁
                                        </span>
                                    </span>
                                </div>
                            )
                        })}
                    </div>
                </div>
            )}
        </div>
    )
}
